<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./MODE/js/jquery-1.12.4.js"></script>
    <title>Document</title>
    <style>
        .table {
            margin: 0 auto;
            text-align: center;
            line-height: 32px;
        }

        .table th {
            width: 120px;
            height: 48px;
            border: 1px solid #ccc;
        }

        td,
        button {
            width: 120px;
            height: 32px;
            border: 1px solid #ccc;
        }
        #submit{
            width: 120px;
            height: 32px;
        }
    </style>
</head>

<body>
    <table class="table">
        <thead>
            <th>id</th>
            <th>电话</th>
            <th>密码</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr class="add">
                <td><input type="text"  name="id" ></td>
                <td><input type="text"  name="phone"></td>
                <td><input type="text"  name="password"></td>
                <td><input type="text"  name="name"></td>
                <td><input type="number"  name="sex"></td>
                <td><input type="number"  name="age"></td>
                <td><input type="text"  name="class" id="class"></td>
                <td><input type="submit" name="submit" id="submit"></td>
            </tr>
        </tbody>

    </table>
    <script>
        //封装阿贾克斯函数
        function AJAX(ajaxdata) {
            var xhr = new XMLHttpRequest();
            if (ajaxdata.method == 'GET') {
                xhr.open(ajaxdata.method, ajaxdata.url);
                xhr.send();
            } else {
                xhr.open(ajaxdata.method, ajaxdata.url);
                xmlhttp.setRequestHeader("head", ajaxdata.head);
                xhr.send();
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    ajaxdata.succed(xhr.responseText);

                } else {
                    ajaxdata.err(xhr.status)

                }
            }

        }
        // 获取内容对象
        var ajax = {
            method: 'GET',
            url: 'http://192.168.4.171:8888/',
            head: {},
            succed: function (res) {
                console.log(res);
                data(res);

            },
            err: function (err) {
                console.log(err);
            }
        }
        // 数据整理
        function data(data) {
            var join = JSON.parse(data);
            $.each(join, function (indexInArray, valueOfElement) {
                //  console.log(valueOfElement,indexInArray);
                var tr = $('<tr></tr>');
                // console.log(index, Element);
                $.each(valueOfElement, function (index, Element) {
                    var td = $('<td></td>');
                    $(td).html(Element);
                    $(tr).append(td)
                });
                var button = $('<button>删除</button>')
                $(tr).append(button)
                $('tbody').append(tr)
            });

            // 绑定点击事件
            $('button').on('click', function () {
                var id = $(this).siblings().eq(0).text();
                del(id)
                console.log($(this).parent());
                $(this).parent().css('opacity', 0.3)
            })
        }

        // 删除函数
        function del(id) {
            var deled = {
                method: 'GET',
                url: 'http://192.168.4.171:8888/delete?id=' + id,
                head: {},
                succed: function (res) {
                    console.log(res);
                    alert(res)

                },
                err: function (err) {
                    console.log(err);
                }
            }
            AJAX(deled);
        }
        // 添加函数
        function add(tianjia) {
            var dou = {}
            $('.add').find('input').each(function (index, element) {
                // element == this
                $(dou).attr($(this).attr('name'), $(this).val())

            });
            delete dou.id;
            delete dou.submit;
            delete dou.className;
            var urlafter = '?';
            $.each(dou, function (index, value) {
                urlafter += index + '=' + value + '&';
            });
            urlafter = urlafter.substr('', urlafter.length - 1);
            urlafter=urlafter+'&class='+$('#class').val()
            
            var addajax = {
                method: 'GET',
                url: 'http://192.168.4.171:8888/add' + urlafter,
                head: {},
                succed: function (res) {
                    console.log(res);
                    // data(res);
                    alert(res)
                },
                err: function (err) {
                    console.log(err);
                }
            }
            AJAX(addajax)
        }
        $("#submit").on('click', function () {
            add()
        })




        AJAX(ajax);
    </script>
</body>

</html>